//--------------------------------------------------------------------------
//
//  JTable and related components
//
//--------------------------------------------------------------------------

//--------------------------------------
//  Vars / Mixins
//--------------------------------------

@table-left-right-padding: 23px; // 24 inc border
@table-column-spacing: 32px;
// !!!IMPORTANT!!! Don't change the above without changing the constants in JTable.jsx to match!

// FIXME: We need to sort out the mess of different colours we've got all over the place
@table-border-color: #e6eaee;
@table-header-color: rgba(53, 64, 82, 0.5);
@table-hover-bg: #fafbfd;

//--------------------------------------
//  Outer JTable component
//--------------------------------------

.JTable {
    border: solid 1px @table-border-color;
    border-radius: 3px;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    &.u-table-maxwidth {
        max-width: 1170px;
    }
}

//--------------------------------------
//  Row Components
//--------------------------------------

.JTable-row {
    display: flex;
    flex-direction: row;
    border-top: solid 1px @table-border-color;

    &:first-child {
        border-top: none;
    }
}

a.JTable-row--href {
    color: inherit;

    &:hover {
        color: inherit;
        text-decoration: inherit;
    }
}

.JTable-row--rollOver {
    cursor: pointer;

    &:hover {
        background: @table-hover-bg;
    }
}

//--------------------------------------
//  Cell Components
//--------------------------------------

.JTable-cell {

    min-width: 0; // Otherwise columns will not shrink uniformly

    height: 48px;

    display: flex;
    align-items: center;

    padding-left: @table-column-spacing / 2;
    padding-right: @table-column-spacing / 2;

    a&, a&:hover,
    a.unstyled-link {
        color: inherit;
        text-decoration: inherit;
    }

    &:first-child {
        padding-left: @table-left-right-padding;
    }

    &:last-child {
        padding-right: @table-left-right-padding;
    }

    .actions-container {
        position: relative;

        &:after {
            position: absolute;
            content: " ";
            pointer-events: none;
            background-color: white;
            transition: background-color 0.15s;
            top: 0;
            right: 24px;
            width: calc(100% - 24px);
            height: 100%;

            .JTable-row--rollOver:hover & {
                background-color: #fafbfd;
            }
        }

        .JTable-row--rollOver:hover &:after {
            background-color: transparent;
        }

        .ParametersRunButton,
        .history-button-component,
        .jenkins-pipeline-branches-list-action,
        .jenkins-pipeline-branches-list-action > div {
            display: inline-block;
            vertical-align: middle;
        }

    }
}

.TableCell--actions {
    .JTable-cell-contents {
        display: flex;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }
}

.JTable-cell-contents {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    .overflow-ellipsis();

    .text-with-ellipsis-container {
        .overflow-ellipsis();
    }
}

.JTable-header {
    color: @table-header-color;
    font-size: 12px;
    text-transform: uppercase;
    font-weight:bold;
}
